<template>
    <div>
        <el-form :inline="true" :model="condition" class="search-form" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业港口">
                        <select-port :resNull="true" v-model="allPortCode"
                                     @select="changePort" :name="portName" :isMultiple = "true"></select-port>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="mb-10 z-alert">
            <span class="el-icon-info" style="color: #409efe;margin-left: 10px"></span>
            按创建时间统计：已作业量 / 未完成量 单位（TEU）
        </div>
        <div class="plan-flex plan-between" style="max-width: 1100px">
            <div class="plan-flex plan-direction">
                <div class="plan-box">
                    <z-month ref="month" @data="getLine" @month="handleSetDay" @worked="v=>loadData(v,true)"
                             @work="v=>loadData(v,false)" :getData="getData"></z-month>
                </div>
                <div style="margin-top: 20px">
                    <div class="plan-box-header">
                        <p>已作业箱量TEU</p>
                    </div>
                    <div class="plan-box" style="padding: 0">
                        <div id="pie" @mouseenter="onChartClickPie" @mouseleave="offChartClickPie"
                             style="height: 260px"
                             class="classCount-style"></div>
                    </div>
                </div>
                <div style="margin-top: 20px">
                    <div class="plan-box-header">
                        <p>作业量</p>
                    </div>
                    <div class="plan-box" style="padding: 0">
                        <div id="line" @mouseenter="onChartClickLine" @mouseleave="offChartClickLine"
                             class="classCount-style"></div>
                    </div>
                </div>
            </div>
            <div class="plan-box">
                <z-day ref="day" :getData="getData" @set-day="v=>loadDataCount(v,true)"></z-day>
                <div>
                    <progress-count v-if="power('TALLY_WORK_UPLOADPLAN')" class="mt-20" title="出口装船量 TEU"
                                    btn="建装船计划" :total="zc.total" :wait="zc.waitClose"
                                    @line-click="v=>handleProgress({path: '/work/shipPlan/load',name: '装船计划列表'},v)"
                                    @btn-click="handleProgress({path: '/work/shipPlan/loadAdd',name: '创建装船计划'})"
                                    :noWrok="Number(zc.noJobNum)" :num="zc.jobNum" type="ss"></progress-count>
                    <progress-count v-if="power('TALLY_WORK_UNLOADPLAN')" class="mt-20" title="进口卸船量 TEU"
                                    btn="建卸船计划" :total="xc.total" :wait="xc.waitClose"
                                    @line-click="v=>handleProgress({path: '/work/shipPlan/unload',name: '卸船计划列表'},v)"
                                    @btn-click="handleProgress({path: '/work/shipPlan/unloadAdd',name: '创建卸船计划'})"
                                    :noWrok="Number(xc.noJobNum)" :num="xc.jobNum" type="ss"></progress-count>
                    <progress-count v-if="power('TALLY_WORK_ENCHASELIST')" class="mt-20" title="装箱理货量 TEU"
                                    btn="装箱理箱" :total="load.total"
                                    @line-click="v=>handleProgress({path: '/work/load',name: '装箱理货'},v)"
                                    @btn-click="handleBtn('load')"
                                    :noWrok="Number(load.noJobNum)" :num="load.jobNum" type="ss"></progress-count>
                    <progress-count v-if="power('TALLY_WORK_DEVANLIST')" class="mt-20" title="拆箱理货量 TEU"
                                    btn="拆箱理箱" :total="unload.total"
                                    @line-click="v=>handleProgress({path: '/work/unbox',name: '拆箱理货'},v)"
                                    @btn-click="handleBtn('unbox')"
                                    :noWrok="Number(unload.noJobNum)" :num="unload.jobNum" type="ss"></progress-count>
                    <progress-count v-if="power('TALLY_WORK_SPECIALLIST')" class="mt-20" title="特殊理箱量 TEU"
                                    btn="特殊理箱" :total="sp.total"
                                    @line-click="v=>handleProgress({path: '/work/special',name: '特殊理箱'},v)"
                                    @btn-click="handleBtn('sp')"
                                    :noWrok="Number(sp.noJobNum)" :num="sp.jobNum" type="ss"></progress-count>
                </div>
                <div class="plan-flex plan-bottom-count mt-20" v-if="power('TALLY_WORK_DEVANPASSLIST')"
                     style="justify-content: space-between">
                    <div>
                        封航未放行量 : <strong>{{ close.total }}</strong> TEU
                    </div>
                    <div>
                        已放行量 : <strong style="color: #409EFE;cursor: pointer;"
                                       @click="handleProgress({path: '/work/feeClose',name: '拆提放行'})">{{ close.totaled
                        }}</strong> TEU
                    </div>
                    <div class="progress-btn"  @click="handleProgress({path: '/work/shipPlan/feeForm',name: '拆提放行'})"
                         style="background:#409EFE;margin-left: 20px">
                        拆提放行
                    </div>
                </div>
            </div>
        </div>
        <load-form v-if="dialogForm" ref="load" @load="addLoad"></load-form>
        <special-form v-if="dialogForm" ref="sp" @load="addLoad"></special-form>
        <unbox-form v-if="dialogForm" ref="unbox" @load="addLoad"></unbox-form>
        <fee-form v-if="feeForm" ref="feeForm" @load="addLoad"></fee-form>
    </div>
</template>

<script>
    import zDay from '@/components/calendar/z-day'
    import zMonth from '@/components/calendar/z-month'
    import selectPort from '@/components/select/selectPort'
    import progressCount from './components/progress-count'
    import {
        getShipPlanPie,
        getProgressPlan,
        getProgressWork,
        getProgressClose,
        getShipPlanCalendar
    } from "@/api/shipPlan/shipPlan";
    import unboxForm from './unboxForm'
    import specialForm from './specialForm'
    import loadForm from './loadForm'
    import feeForm from './feeForm'
    import { portCode } from "../../../assets/dict";

    // 引入基本模板
    let echarts = require("echarts/lib/echarts");
    import "echarts/theme/macarons";
    // 引入提示框和title组件
    require("echarts/lib/component/tooltip");
    require("echarts/lib/component/title");
    require("echarts/lib/chart/line");
    require("echarts/lib/chart/pie");
    export default {
        name: "理货作业",
        components: {
            zDay, zMonth, progressCount, selectPort, unboxForm, specialForm, loadForm, feeForm
        },
        data() {
            return {
                getData: getShipPlanCalendar,
                condition: {},
                pie: '',
                line: '',
                zc: {
                    total: 0,
                    noJobNum: 0,
                    jobNum: 0
                },
                xc: {
                    total: 0,
                    noJobNum: 0,
                    jobNum: 0
                },
                load: {
                    total: 0,
                    noJobNum: 0,
                    jobNum: 0
                },
                unload: {
                    total: 0,
                    noJobNum: 0,
                    jobNum: 0
                },
                sp: {
                    total: 0,
                    noJobNum: 0,
                    jobNum: 0
                },
                close: {},
                dialogForm: false,
                feeForm: false,
                recordDay: '',
                portName: '',
                allPortCode : ''
            }
        },
        mounted() {
            const port = JSON.parse(sessionStorage.getItem('SET_PORT'))
            // if (port && port.length !== 1) {
            //     this.changePort('')
            // }
        },
        activated() {
            // this.changePort('')
            // this.changePort('')
            this.portName = ''
            this.$nextTick(() => {
                this.$refs.day.isFirst = true
            })
        },
        methods: {
            handleProgress(val, cd) {
                console.log(cd)
                if (cd === "aa") {
                    window.localStorage.cdStatus = '理箱完成'
                } else {
                    window.localStorage.cdStatus = ''
                }

                sessionStorage.setItem('SHIP_DATE', this.$refs.day.today)
                if (val.name.indexOf('拆提放行') !== -1) {
                    const condition = JSON.stringify({ ...this.condition, search_EQ_isFinish: cd })
                    sessionStorage.setItem('shipIndex', condition)
                } else {
                    let goCondition = this.condition
                    if (goCondition != undefined && goCondition != "" && goCondition.search_EQ_portCode != ""){
                        this.$set(goCondition,"search_EQ_portCode", this.allPortCode)
                    }
                    const condition = JSON.stringify({ ...goCondition })
                    sessionStorage.setItem('ctIndex', condition)
                }
                this.$store.commit("ADD_CACHED_VIEWS", val);
                this.$router.push(val.path);
            },
            handleBtn(key) {
                this.dialogForm = true
                this.$nextTick(() => {
                    this.$refs[key].dialogForm = true
                })
            },
            addLoad() {
                let day = this.recordDay
                this.changePort(this.condition['search_EQ_portCode'])
                this.$nextTick(() => {
                    this.$refs.day.today = day
                    this.$refs.day.isFirst = true
                })
            },
            loadData(data = '', bool = true) {
                let params = {
                    search_EQ_type: bool,
                    search_GTE_dateTime: data.date,
                    search_LTE_dateTime: data.date,
                    search_IN_portCode: this.condition['search_EQ_portCode']
                }
                getShipPlanPie(this.$assist.copySearchConditions(params)).then(res => {
                    let arr = res.data.aaData
                    let data = []
                    for (let i = 0; i < arr.length; i++) {
                        data.push({
                            name: arr[i].type,
                            value: arr[i].teu
                        })
                    }
                    this.pie = echarts.init(
                        document.getElementById("pie"),
                        "macarons"
                    );
                    this.pie.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: name
                        },
                        series: [
                            // {
                            //     name: '',
                            //     type: 'pie',
                            //     radius: '55%',
                            //     center: ['50%', '60%'],
                            //     data: data,
                            //     itemStyle: {
                            //         emphasis: {
                            //             shadowBlur: 10,
                            //             shadowOffsetX: 0,
                            //             shadowColor: 'rgba(0, 0, 0, 0.5)'
                            //         }
                            //     }
                            // },
                            {
                                name: '',
                                type: 'pie',
                                radius: '55%',
                                label: {
                                    normal: {
                                        formatter: '{b} : {c} ({d}%)',
                                        backgroundColor: '#eee',
                                        borderColor: '#aaa',
                                    }
                                },
                                data: data
                            },

                        ]
                    })
                })
            },
            loadDataCount(data) {
                this.recordDay = data.date
                let planParams = this.$assist.copySearchConditions({
                    search_GTE_dateTime: data.date,
                    search_LTE_dateTime: data.date,
                    search_IN_portCode: this.condition['search_EQ_portCode']
                })
                let zcPlanParams = {
                    ...planParams,
                    search_EQ_planType: 'ZC'
                }
                getProgressPlan(zcPlanParams).then(res => {
                    this.zc = res.data
                })
                let xcPlanParams = {
                    ...planParams,
                    search_EQ_planType: 'XC'
                }
                getProgressPlan(xcPlanParams).then(res => {
                    this.xc = res.data
                })
                let workParams = this.$assist.copySearchConditions({
                    search_GTE_dateTime: data.date,
                    search_LTE_dateTime: data.date,
                    search_IN_portCode: this.condition['search_EQ_portCode']
                })
                let loadWorkParams = {
                    ...workParams,
                    search_EQ_workType: 'load'
                }
                getProgressWork(loadWorkParams).then(res => {
                    this.load = res.data
                })
                let unboxWorkParams = {
                    ...workParams,
                    search_EQ_workType: 'unbox'
                }
                getProgressWork(unboxWorkParams).then(res => {
                    this.unload = res.data
                })
                let spWorkParams = {
                    ...workParams,
                    search_EQ_workType: 'sp'
                }
                getProgressWork(spWorkParams).then(res => {
                    this.sp = res.data
                })
                getProgressClose().then(res => {
                    this.close = res.data
                })
            },
            getTotal() {

            },
            handleSetDay(item) {
                this.$refs.day.setYear = item.month.split('-')[0]
                this.$refs.day.setMonth = item.months
                this.$refs.day.search = 'search_IN_portCode'
                this.$refs.day.isManyChoice = true
                this.$refs.day.keyWords = this.allPortCode
                this.$refs.day.getMonthDay()
            },
            getLine(data) {
                let time = []
                let value = []
                for (let i = 0; i < data.length; i++) {
                    const el = data[i]
                    time.push(el.month)
                    value.push(el.jobNum)
                }
                this.line = echarts.init(
                    document.getElementById("line"),
                    "macarons"
                )
                this.line.setOption({
                    title: {
                        text: '作业量',
                        x: 'center'
                    },
                    legend: {
                        data: ['作业量'],
                        right: 5,
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: time
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '作业量',
                        data: value,
                        type: 'line',
                        smooth: false
                    }]
                })
            },
            onChartClickPie() {
                this.pie.on('click', (param) => {
                    const { name } = param
                    // this.condition.search_LIKE_portName = name
                    // this.getTotal()
                })
            },
            offChartClickPie() {
                this.$nextTick(() => {
                    this.pie.off('click')
                })
            },
            onChartClickLine() {
                this.line.on('click', (param) => {
                    const { seriesName, name } = param
                    // this.condition.search_LIKE_portName = seriesName
                    // this.getTotal();
                })
            },
            offChartClickLine() {
                this.$nextTick(() => {
                    this.line.off('click')
                })
            },
            arrayToString:function(arr){
                let value = ""
                if (arr != null && arr != "" && arr.length > 0){
                    arr.forEach((column, index) => {
                        value = value + "," + column
                    })
                    value = value.substring(1)
                }
                return value
            },
            changePort(val) {
                const port = JSON.parse(sessionStorage.getItem('SET_PORT'))
                if (port && port.length == 1){
                    if (val != null && val != ""){
                        this.allPortCode=[val]
                    }
                }
                this.condition['search_EQ_portCode'] = this.arrayToString(this.allPortCode)
                // this.portName = portCode.get(this.condition['search_EQ_portCode'])
                this.$nextTick(() => {
                    this.$refs.month.search = 'search_IN_portCode'
                    this.$refs.month.keyWords = this.allPortCode
                    this.$refs.month.isManyChoice = true
                    this.$refs.month.getMonthDay()
                })
            },
            toFeeForm() {
                this.feeForm = true
                this.$nextTick(() => {
                    this.$refs.feeForm.dialogForm = true
                })
            }
        }
    }
</script>

<style scoped>
    #line {
        height: 300px;
    }

    .plan-box {
        padding: 20px;
        border: 1px solid #dddddd;
    }

    .plan-box-header {
        border: 1px solid #dddddd;
        border-bottom: none;
    }

    .plan-box-header p {
        padding: 10px;
    }

    .plan-flex {
        display: flex;
    }

    .plan-between {
        justify-content: space-between;
    }

    .plan-direction {
        flex-direction: column;
    }

    .progress-btn {
        color: #ffffff;
        padding: 5px;
        font-size: 12px;
        border-radius: 5px;
        cursor: pointer;
        min-width: 70px;
        text-align: center;
    }

    .plan-bottom-count {
        margin-top: 10px;
        border-top: 1px solid #dddddd;
        padding-top: 10px;
    }

    .classCount-style {
        height: 200px;
        width: 100%;
    }

    .z-alert {
        font-size: 14px;
        background: #e8f8fe;
        border: 1px solid #a3dcff;
        height: 32px;
        line-height: 32px;
        width: 100%;
        max-width: 1060px;
        padding: 0 20px;
    }
</style>
